/**
 * Created by Administrator on 2017/2/16.
 */

import React, {Component, PropTypes} from 'react';
import {Header} from '../header/header';
import {getQueryString} from '../../scripts/url';
import {initFunction,fade} from '../../scripts/tip'
import {initPresetOrderDetail} from '../../scripts/presetOrderDetail'
import {BtnBottom} from '../prodcut/productDetails'


export default class PresetOrderDetail extends Component {
    componentDidMount() {

        fade();
        layer.closeAll();

        $(document).bind("mobileinit", function()
        {
            if (navigator.userAgent.indexOf("Android") != -1)
            {
                $.mobile.defaultPageTransition = 'none';
                $.mobile.defaultDialogTransition = 'none';
            }
        });
        var url=location.href;

        //TODO getProductId
        var productDetailId=getQueryString("productDetailId",url);
        var count=getQueryString("count",url);
        var voucherMoney=getQueryString("voucherMoney",url)||0;
        var voucherSecret=getQueryString("voucherSecret",url)||'';
        var productId=getQueryString("productId",url)||'';

        initPresetOrderDetail(productDetailId,count,voucherMoney,voucherSecret,productId);

        initFunction();


        $('.header h1 .presetback').click(function () {
            location.href='#/mall/productDetails?productId='+productId+''
        });
    }

    render(){
        return <div className="PresetOrderDetail">
            <Header headerTitle="确认订单" className="presetback" />
            <OrderDetailsList />
        </div>
    }
}

export  class OrderDetailsList extends Component {
    render() {
        return <div className="OrderDetailsList fadeaction">

                <OrderDetailsAddr />
                <OrderDetailsProduct />
                 <OrderDetailsTicket />
               <OrderDetailsPay />
            <BtnBottom btnTitle='确认付款'className="addOrder"/>
        </div>
    }
}


export  class OrderDetailsAddr extends Component {
    render(){
        return <div className="OrderDetailsAddrWrap ">

           <div className="OrderDetailsAddr border-tb   noneAddr">
               <a  className="titleWrap border-tb hide"> <div className="title addIcon">请填写收货信息</div> </a>
               <div className="addr-infor">
                   <div  className="addr-inforWrap addIcon">
                       <div>
                           <span className="realName"></span>
                           <span className="telephone"></span>
                       </div>
                       <div className="addressIdNumber"></div>
                   </div>
               </div>
            </div>


        </div>
    }
}


export  class OrderDetailsProduct extends Component {
    render(){
        return <div className="MyOrderList">
            <ul>
                <li>
                    <div className="liWrap border">
                        <div className="orderDetails border-tb ">
                            <div className="order-imge cell">
                                <div className="product-img">
                                </div>
                            </div>
                            <div className="order-name cell">
                                <h1></h1>
                                <h2>
                                    <span></span>
                                    <span></span>
                                </h2>
                            </div>
                            <div className="order-price cell">
                                <h1>￥118</h1>
                                <h2>X1</h2>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div className="reward border-tb">
                <a href="javascript:;" className="radioBtn">
                    <i className="icon ">
                    </i>
                </a>
                  <div className="infor">
                      <div className="title">使用红包抵扣</div>
                      <div className="subtitle"></div>
                  </div>
                  <div className="money">-￥<span className="realMoney">0.04</span></div>
            </div>
        </div>
    }
}


export  class OrderDetailsTicket extends Component {
    render(){
        return <div className="OrderDetailsTicket">
               <a href="#/mall/voucher" className="ticket border-tb">
                   <span className="ticketTitle">抵用券</span>
                   <span className="ticketUse">未使用抵用券</span>

               </a>
               <div className="freight">
                   <span>邮费信息</span>
                   <span>+￥<span className="realFreight">10</span></span>
               </div>
        </div>
    }
}


export  class OrderDetailsPay extends Component {

      render(){
            return <div className="OrderDetailsPayWrap">
               <div className="OrderDetailsPay border">
                  <div className="payWayWrap border-tb">
                      <div className="payWay ">
                          支付宝
                          <i className="icon icon-select">
                          </i>
                      </div>
                  </div>
                   <div className="payDetails">
                       <p className="price">
                           <span>商品售价：</span>
                           <span>￥118</span>
                       </p>
                       <p className="reward">
                           <span>红包抵扣：</span>
                           <span>-￥2.9</span>
                       </p>
                       <p className="ticket">
                           <span>抵用券抵扣：</span>
                           <span>-￥10</span>
                       </p>
                       <p className="freight">
                           <span>运费：</span>
                           <span>+￥0</span>
                       </p>
                       <p className="realPrice">
                           <span>实付款：</span>
                           <span>￥118</span>
                       </p>
                   </div>
               </div>
            </div>
    }
}

export  class OrderDetailsPayBtn extends Component {
  render(){
      return <div className="OrderDetailsPayBtn">
          <a href="javascript:;">取消订单</a>
          <a href="javascript:;"  className="addOrder">确认付款</a>
      </div>
  }
}